<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<t:template>
	<jsp:attribute name="include">
		<script type="text/javascript">
			<c:if test="${currentUser }">
				function showModal(title, id){
					$("#merchandiseId").val(id);
					$("#headTitle").html(title+' képének feltöltése');
					$("#pictureModal").modal('show');
				}
			</c:if>
		
			function reloadTable() {
				var table = $('#merchTable').dataTable();
				table.fnReloadAjax();
			}
			
			var serverDatas = [ "categoryId", "username" ];
			
			function pageInit() {
				createDataTable("merchTable", '<c:url value="/profile/sales/getSales"/>', [ {
					"sName" : "name",
					"aTargets" : [ 0 ],
					"bSortable" : true,
					"mData" : function(data, type, full) {
						return '<a href="<c:url value="/shop/sales"/>/' + data.id + '">' + data.name + '</a>';
					}
				}, colDefNotSortable(1, "category.label"), colDef(2, "price"), dateColDef(3, "lastchange"),
				<c:if test="${currentUser}">
						{
							"sName" : "setting",
							"aTargets" : [ 4 ],
							"bSortable" : false,
							"mData" : function(data, type, full) {
								return '<a href="#" onclick="showModal(\''+data.name+'\','+data.id+');return false;"/>Kép</a>';
							}
						}
				</c:if>
				], true);
				var selectGen = $('#selectGen');
				$("#merchTable_filter>label>input").replaceWith(selectGen.html());
				selectGen.remove();
			}
		</script>
	</jsp:attribute>

	<jsp:attribute name="pagetitle">
		<c:choose>
			<c:when test="${currentUser }">
				<div style="width: 95%;">
					Hirdetéseim
					<div class="pull-right btn-group">
						<a href="<c:url value="/profile"/>" class="btn btn-info">Profilom</a>
					</div>
				</div>
			</c:when>
			<c:otherwise>
				<div style="width: 95%;">
					<c:out value="${user.username }" /> hirdetései
					<div class="pull-right btn-group">
						<a href="<c:url value="/profile/${username }"/>"
							class="btn btn-info">Profilja</a>	
					</div>
				</div>
			</c:otherwise>
		</c:choose>
    </jsp:attribute>
	<jsp:body>
		<div id="selectGen">
			<input type="hidden" name="username" id="username"
				value="<c:out value="${username }" />">
			<select id="categoryId" name="categoryId" data-size="7"
				onchange="reloadTable()">
				<option value="0">Mind</option>
				${categoryOptions }
			</select>
		</div>
    	<table id="merchTable">
		    <thead>
				<tr>
					<th>Megnevezés</th>
					<th>Kategória</th>
					<th>Ár (Ft)</th>
					<th>Utolsó módosítás</th>
					<c:if test="${currentUser }">
						<th>&nbsp;</th>
					</c:if>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<c:if test="${currentUser }">
						<td></td>
					</c:if>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th>Megnevezés</th>
					<th>Kategória</th>
					<th>Ár (Ft)</th>
					<th>Utolsó módosítás</th>
					<c:if test="${currentUser }">
						<th>&nbsp;</th>
					</c:if>
				</tr>
			</tfoot>
    	</table>
    	<c:if test="${currentUser }">
    	<div class="modal hide fade" id="pictureModal">
    		<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h3>
					<span id="headTitle"></span>
				</h3>
			</div>
			<div class="modal-body">
				<div class="alert">
    				<strong>Figyelem!</strong> Új kép feltöltése felülírja a régit!
    			</div>
				<form method="post" class="form-horizontal" id="uploadForm"
						enctype="multipart/form-data"
						action="<c:url value="/shop/picture/upload"/>"
						style="position: relative; left: -80px;">
					<input type="hidden" id="merchandiseId" name="merchandiseId">
					<div class="control-group">
					    <label class="control-label" for="picture">Kép:</label>
						<div class="controls">
							<div class="fileupload fileupload-new" data-provides="fileupload">
								<div class="input-append">
									<div class="uneditable-input span3">
										<i class="icon-file fileupload-exists"></i>
										<span class="fileupload-preview"></span>
									</div>
									<span class="btn btn-file">
										<span class="fileupload-new">Fájl kiválasztása</span>
										<span class="fileupload-exists">Változtatás</span>
										<input type="file" id="picture" name="picture" />
									</span>
									<a href="#" class="btn fileupload-exists"
											data-dismiss="fileupload">Eltávolítás</a>
									<span class="help-inline"></span>
								</div>
							</div>
						</div>
					</div>
				</form>				
			</div>
			<div class="modal-footer">
				<div class="btn-group">
					<input type="submit" class="btn btn-primary" value="Feltöltés"
							onclick="$('#uploadForm').submit();">
					<a href="#" class="btn" data-dismiss="modal">Bezárás</a>
				</div>
			</div>
    	</div>
    	</c:if>
    </jsp:body>
</t:template>